<template>
  <BasicModal title="编辑公式" @register="registerModal" @ok="handleSubmit">
      <div class="sumary-box">
        <Button type="primary" plain @click="clear">清空公式</Button>
        <span class="ml-8">增加固定值:</span>
        <InputNumber v-model:value="number" style="width: 200px !important"></InputNumber>
        <Button type="primary" plain @click="addNumber">添加</Button>
        <Textarea disabled v-model:value="form.functionDesc" style="margin-top: 12px;"></Textarea>
        <div class="sumary-choose-box">
          <div>
            <span></span>
            <ApiTree v-bind="treeProps">
              <template #title="data">
                <div>
                  {{ data.groupName }}{{data.countLevel ? `(计算级别:${data.countLevel})` : ''}}{{ data.description ? `(${data.description})` : '' }}
                </div>
              </template>
            </ApiTree>
          </div>
          <div>
            <p>操作符选择</p>
            <div class="operates">
              <span class="operate-item" v-for="(item, index) in operates" :key="index">
                <Button type="primary" size="mini" @click="handleOperateClick(item)">{{ item.label }}</Button>
              </span>
            </div>
          </div>
        </div>
      </div>
    </BasicModal>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, reactive } from 'vue'
import { Textarea, Button, InputNumber } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal'
import { ApiTree } from '@/components/Form'
import { getlistClassifyTree } from '@/api/collection/classify';
import { number } from 'vue-types';
import { addNumber } from 'vant/lib/utils';
interface Operate {
  label: string,
  value: string
}
const props = defineProps({
})
const emit = defineEmits(['register', 'success'])
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  form.functionDesc = data.functionDesc || ''
  form.functionId = data.functionId || ''
})
const number = ref(null)
const treeProps = ref({
  api:getlistClassifyTree,
  fieldNames: { key: 'groupId', title: 'groupName' },
  selectable: true,
  onSelect: (selectedKeys, {node}) => {
    console.log(selectedKeys, node)
    form.functionDesc += '${'+node.fullPath+'}'
    form.functionId += '${'+node.groupId+'}'
  }
})
const operates:Operate[] = [
  {
    label: '+',
    value: '+'
  },
  {
    label: '-',
    value: '-'
  },
  {
    label: '*',
    value: '*'
  },
  {
    label: '/',
    value: '/'
  }
]
const form:Recordable = reactive({
  functionDesc: '',
  functionId: ''
})
const handleOperateClick = (item: Operate) => {
  form.functionDesc += `${item.value}`
  form.functionId += `${item.value}`
}
const addNumber = () => {
  form.functionDesc += number.value
  form.functionId += number.value
  number.value = null
}
const clear = () => {
  form.functionDesc = ''
  form.functionId = ''
  number.value = null 
}
const handleSubmit = () => {
  emit('success', form)
}
</script>


<style lang="less" scoped>
.sumary-box{
  padding-bottom: 40px;
  .sumary-choose-box{
    display: flex;
    margin-top: 20px;
    &>div{
      flex: 1;
    }
    .operates{
      span{
        margin-right: 12px;
      }
    }
  }
}
</style>